<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>管理员列表-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/weadmin.css">
    <script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/lib/jquery-2.1.3.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="weadmin-body">
    <div class="weadmin-block">
        <button class="layui-btn" onclick="showADD()"><i class="layui-icon"></i>添加</button>
    </div>
    <table class="layui-table">
        <colgroup>
            <col width="60">
            <col width="120">
            <col width="120">
            <col width="120">
            <col width="60">
            <col width="500">
            <col width="120">
        </colgroup>
        <thead>
        <tr>
            <th>ID</th>
            <th>串口名</th>
            <th>波特率</th>
            <th>传感器</th>
            <th>大棚id</th>
            <th>串口最后接收到的数据</th>
            <th>操作</th>
        </thead>
        <tbody>
        <tr th:each="comMessage : ${comMessages}">
            <td th:text="${comMessage.id}">1</td>
            <td th:id="'comName'+${comMessage.id}" th:text="${comMessage.comName}">COM(n)</td>
            <td th:text="${comMessage.baudrate}">115200</td>
            <td th:id="'sensor'+${comMessage.id}" th:text="${comMessage.sensor}">光照传感器</td>
            <td th:text="${comMessage.house_id}">1</td>
            <td th:text="${comMessage.last_message}">EE FF 00 00 00 00 00 00 00 00 00 00 00 00</td>
            <td class="td-manage">
                <a th:id="'del'+${comMessage.id}" title="删除" onclick="del(this.id)" href="javascript:;">
                    <i class="layui-icon">&#xe640;</i>
                </a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div style="margin: 10px;display: none" id="showAddCOM">
    <p>每个大棚需要添加5个串口，分别是：
        reader (阅读器), illuminance (光照传感器),
        temphumi (温湿度传感器), walker (步进电机),
        alarm (声光警报器)</p>
    <p>串口名</p>
    <input id="comName" name="comName"  type="text" lay-verify="required" class="layui-input" >
    <p>波特率</p>
    <input id="baudrate" name="baudrate"  type="text" lay-verify="required" class="layui-input" >
    <p>传感器</p>
    <input id="sensor" name="sensor"  type="text" lay-verify="required" class="layui-input" >
    <p>大棚id</p>
    <input id="house_id" name="house_id"  type="text" lay-verify="required" class="layui-input" >
    <hr class="hr15">
    <input id="addCOM" onclick="add()" value="添加" lay-submit lay-filter="login" style="width:100%;" type="submit">
    <hr class="hr15">
    <input id="back" onclick="back()" value="取消" lay-submit lay-filter="login" style="width:100%;" type="submit">
    <hr class="hr15">
</div>
<script src="/static/lib/layui/layui.js" charset="utf-8"></script>
<script src="/static/js/eleDel.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    function showADD() {
        alert("添加串口之前请确认你已经添加了大棚")
        layui.use('layer', function(){
            var layer = layui.layer;

            layer.open({
                type: 1,
                content: $('#showAddCOM')
            });
        });
    }
    function back() {
        layui.use('layer', function(){
            var layer = layui.layer;

            layer.closeAll();
        });
    }
    function add() {
        var comName = $("#comName").val();
        var baudrate = $("#baudrate").val();
        var sensor = $("#sensor").val();
        var house_id = $("#house_id").val();
        if (comName == "" || comName == null ||
            baudrate == "" || baudrate == null ||
            sensor == "" || sensor == null ||
            house_id == "" || house_id == null){
            alert("不能有空数据");
        }else {
            $.ajax({
                type : "POST",
                url : "/com/addCOM",
                data : {
                    "comName" : comName,
                    "baudrate" : baudrate,
                    "sensor" : sensor,
                    "houseId" : house_id
                },
                async : false,
                cache : false,
                success : function(data) {
                    if (JSON.parse(data).msg == "success") {
                        alert("添加成功");
                        window.location.reload();
                        //返回
                        back();
                    }else if (JSON.parse(data).msg == "大棚不存在") {
                        alert("大棚不存在");
                    }else {
                        alert("添加失败");
                    }
                },
                error : function() {
                    alert("系统错误");
                }
            });
        }
    }
    function del(id) {
        var com_id = id.substring(3);
        var con = confirm("你确定删除" + $("#comName"+com_id).text() + "吗？, 该串口连接的传感器是" + $("#sensor"+com_id).text());
        if (con == true){
            $.ajax({
                type : "POST",
                url : "/com/delCOM",
                data : {
                    "id" : com_id
                },
                async : false,
                cache : false,
                success : function(data) {
                    if (JSON.parse(data).msg == "success") {
                        alert("删除成功");
                        window.location.reload();
                        //返回
                        back();
                    }else {
                        alert("删除失败");
                    }
                },
                error : function() {
                    alert("系统错误");
                }
            });
        } else {

        }
    }
</script>
</body>
</html>